<div class="row animate fadeIn">
    <form class="form-horizontal" id="">
    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>View</i></h5>
        
     </div>
     <div class="ibox-content">
        <?php foreach($mm_data as $data){ ?>
            <input type="hidden" name="e_hidden_id" value="<?php echo $data->mmeter_id; ?>" >
            <div class="form-group">
                <label class="col-lg-3 control-label">Mother Meter Name</label>
                    <div class="col-lg-5">
                        <input type="text" id=""class="form-control" name="" value="<?php echo $data->mother_name; ?>" readonly>
                    </div>
             </div>
             <div class="form-group">
                <label class="col-lg-3 control-label">Model</label>
                    <div class="col-lg-5">
                        <input type="text" id=""class="form-control" name="" value="<?php echo $data->mother_model; ?>" readonly>
                    </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">Serial  Number</label>
                  <div class="col-lg-5">
                        <input type="text" id=""class="form-control" name="" value="<?php echo $data->mother_serial; ?>" readonly>
                  </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">Description</label>
                <div class="col-lg-5">
                    <textarea id=""class="form-control" name="" value="<?php echo $data->description; ?>" readonly><?php echo $data->description; ?></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">Latitude</label>
                <div class="col-lg-5">
                    <input type="text" id="e_mmlat" class="form-control" name="" value="<?php echo $data->loc_latitude; ?>" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">Longitude</label>
                <div class="col-lg-5">
                    <input type="text" id="e_mmlng" class="form-control" name="" value="<?php echo $data->loc_longitude; ?>" readonly>
                </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Pick Location</label>
              <div class="col-lg-6">
                  <div id="map_wrapper" style="height: 300px;">
                      <div id="map_canvas3" class="mapping" style="width: 100%;height: 100%;">
                      </div>
                  </div>
              </div>
            </div>
          <?php } ?>
      </div>
    </form>
    
 </div>
 <script>
    $(document).ready(function(){

    var markers =[];
    initialize();
    

        function initialize() {
          var current=new google.maps.LatLng($('#e_mmlat').val(),$('#e_mmlng').val());
           var mapProp = {
            center:new google.maps.LatLng(8.397371738287157,124.5965675264597),
            zoom:17,
            mapTypeId:google.maps.MapTypeId.SATELITE
          };
          var map=new google.maps.Map(document.getElementById("map_canvas3"),mapProp);
            google.maps.event.addDomListener(window, 'load', initialize);
         
          if($('#e_mmlat').val() != 0 || $('#e_mmlng').val() != 0){
                       var marker=new google.maps.Marker({
                          position:current,
                          });
                        markers.push(marker);
                        marker.setMap(map);
                        map.panTo(current);
                    }

          // map.addListener('click', function(e) {
          //   placeMarkerAndPanTo(e.latLng, map);
          // });  
        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        }


        function placeMarkerAndPanTo(latLng, map) {
          DeleteMarkers();
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
          map.panTo(latLng);

          markers.push(marker);
          $('#e_mmlat').val(latLng.lat());
          $('#e_mmlng').val(latLng.lng());

        }


        function DeleteMarkers() {
        //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers = [];
        }

      $('#viewX').click(function(){
          close_view();
      }); 
    });
 </script>  